<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备监控 - 港口无人化协同作业平台</title>
    <base href="/">
    <link rel="stylesheet" href="/styles.css">
    <link rel="stylesheet" href="/device-monitor.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>

<body>
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="logo">港口无人化协同作业平台</div>
            <ul class="nav-links">
                <li><a href="/index.html">首页</a></li>
                <li><a href="/page2.html">作业管理</a></li>
                <li><a href="page3.html" class="active">设备监控</a></li>
                <li><a href="page4.html">数据分析</a></li>
            </ul>
        </nav>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 设备状态概览 -->
            <div class="overview-cards">
                <div class="card">
                    <h3>岸桥状态</h3>
                    <div class="card-content">
                        <div class="status-info">
                            <span class="number" id="quayCraneCount">0</span>
                            <span class="unit">台</span>
                        </div>
                        <div class="status-detail">
                            <span class="status running">运行中: <span id="quayCraneRunning">0</span></span>
                            <span class="status idle">待机中: <span id="quayCraneIdle">0</span></span>
                            <span class="status maintenance">维护中: <span id="quayCraneMaintenance">0</span></span>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <h3>龙门吊状态</h3>
                    <div class="card-content">
                        <div class="status-info">
                            <span class="number" id="gantryCraneCount">0</span>
                            <span class="unit">台</span>
                        </div>
                        <div class="status-detail">
                            <span class="status running">运行中: <span id="gantryCraneRunning">0</span></span>
                            <span class="status idle">待机中: <span id="gantryCraneIdle">0</span></span>
                            <span class="status maintenance">维护中: <span id="gantryCraneMaintenance">0</span></span>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <h3>AGV状态</h3>
                    <div class="card-content">
                        <div class="status-info">
                            <span class="number" id="agvCount">0</span>
                            <span class="unit">台</span>
                        </div>
                        <div class="status-detail">
                            <span class="status running">运行中: <span id="agvRunning">0</span></span>
                            <span class="status idle">待机中: <span id="agvIdle">0</span></span>
                            <span class="status maintenance">维护中: <span id="agvMaintenance">0</span></span>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <h3>设备健康度</h3>
                    <div class="card-content">
                        <div class="health-chart" id="healthChart"></div>
                    </div>
                </div>
            </div>

            <!-- 设备监控区域 -->
            <div class="monitor-container">
                <!-- 设备列表 -->
                <div class="device-list">
                    <div class="list-header">
                        <h3>设备列表</h3>
                        <div class="filter-controls">
                            <select id="deviceTypeFilter">
                                <option value="all">全部设备</option>
                                <option value="quayCrane">岸桥</option>
                                <option value="gantryCrane">龙门吊</option>
                                <option value="agv">AGV</option>
                            </select>
                            <select id="statusFilter">
                                <option value="all">全部状态</option>
                                <option value="running">运行中</option>
                                <option value="idle">待机中</option>
                                <option value="maintenance">维护中</option>
                            </select>
                        </div>
                    </div>
                    <div class="device-items" id="deviceList">
                        <!-- 设备列表将通过JavaScript动态填充 -->
                    </div>
                </div>

                <!-- 设备详情 -->
                <div class="device-detail">
                    <div class="detail-header">
                        <h3>设备详情</h3>
                        <button class="close-detail" id="closeDetail">×</button>
                    </div>
                    <div class="detail-content">
                        <div class="device-info">
                            <div class="info-group">
                                <label>设备编号：</label>
                                <span id="deviceId">-</span>
                            </div>
                            <div class="info-group">
                                <label>设备类型：</label>
                                <span id="deviceType">-</span>
                            </div>
                            <div class="info-group">
                                <label>当前位置：</label>
                                <span id="deviceLocation">-</span>
                            </div>
                            <div class="info-group">
                                <label>运行状态：</label>
                                <span id="deviceStatus">-</span>
                            </div>
                            <div class="info-group">
                                <label>运行时长：</label>
                                <span id="deviceRuntime">-</span>
                            </div>
                            <div class="info-group">
                                <label>电量状态：</label>
                                <span id="deviceBattery">-</span>
                            </div>
                        </div>
                        <div class="device-charts">
                            <div class="chart-container">
                                <h4>运行状态趋势</h4>
                                <div id="statusTrendChart" class="chart"></div>
                            </div>
                            <div class="chart-container">
                                <h4>电量消耗趋势</h4>
                                <div id="batteryTrendChart" class="chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="device-data.js"></script>
    <script src="device-monitor.js"></script>
</body>

</html>